var vm = new Vue({
    el:"#app",
    data:{
        devNo:"",
        city:"",
        broadbander:""
    },
    methods:{
        /**
         * 初始化bootstrapTable
         */
        initTable:function(){
            var _this = this;
            $('#tbMobile').bootstrapTable($.extend(bootstrapTableOption,{
                url: g_comm.manager_url+'/devMobile/list',           //请求后台的URL（*）
                queryParams: _this.queryParams,               //传递参数（*）
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                columns: [{
                    field: 'devNo',
                    title: '设备编号',
                    formatter:function (value,row,index) {
                        return '<span style="color: dodgerblue;" data-id="'+row.id+'" data-check-permission="dev:mobile:detail" onclick="vm.detail(this)">'+value+'</span>';
                    }
                },{
                    field: 'city',
                    title: '所在市区'
                }, {
                    field: 'broadbander',
                    title: '所接入运营商'
                }, {
                    field: 'ip',
                    title: 'IP地址'
                },{
                    field: 'updateTime',
                    title: '最后更新时间',
                    formatter:function(value,row,index){
                        if(value!=null){
                            return new Date(value).toString("yyyy-MM-dd HH:mm");
                        }else{
                            return new Date(row.createTime).toString("yyyy-MM-dd HH:mm");
                        }
                    }
                },{
                    field: '',
                    title: '操作',
                    formatter : function(value, row, index) {
                        return '<div style="float:left;margin-right: 10px;width: 24px;height: 24px;" data-id="'+row.id+'" data-check-permission="dev:mobile:detail" onclick="vm.detail(this)">' +
                                    '<img src="static/img/dev/more.png" title="设备详情">' +
                                '</div>';
                    }
                }
                ]
            }));


        },
        /**
         * 查询参数
         * @param params
         */
        queryParams:function (params) {
            var startTime = "";
            var endTime = "";
            if($('#rangeTime').val() != ""){
                var times = $('#rangeTime').val().split("~");
                startTime = times[0].trim() + ' 00:00:00';
                endTime = times[1].trim() + ' 59:59:59';
            }
            return {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                devNo:this.devNo,
                city:this.city,
                broadbander:this.broadbander,
                startTime:startTime,
                endTime:endTime
            };
        },
        /**
         * 设备详情
         * */
        detail:function (obj) {
            var id = $(obj).attr('data-id');
            $.ajax({
                url: g_comm.manager_url+"/devMobile/detail",
                data: {id:id},
                success: function(r){
                    if(r.code == 0){
                        var data = r.data;
                        //初始化详情模板
                        var getTpl = detailtpl.innerHTML
                            ,view = document.getElementById('detailAlert');
                        layui.laytpl(getTpl).render(data, function(html){
                            view.innerHTML = html;
                        });//初始化详情模板end

                        layer.open({
                            type: 1,
                            title: '设备详情',
                            shadeClose: true,
                            shade: false,
                            maxmin: true, //开启最大化最小化按钮
                            area: ['650px', '480px'],
                            content: $layui('#detailAlert'),
                            btn:['关闭']
                        });
                    }else{
                        layer.alert(r.msg,{
                            title: '提示',
                            icon:0
                        });
                    }
                }
            });

        },//detail---end
        /**
         * 更多查询
         * */
        more:function () {
            if($('#more span').hasClass("glyphicon-chevron-down")){
                //收起查询
                $('#more').html('<span class="glyphicon glyphicon-chevron-up"></span> 收起查询');
                $('#moreRow').show();
            }else{
                //更多查询
                $('#more').html('<span class="glyphicon glyphicon-chevron-down"></span> 更多查询');
                $('#rangeTime').val('');
                $('#moreRow').hide();
            }
        },
        /**
         * 搜索
         */
        search:function () {
            $('#tbMobile').bootstrapTable('refreshOptions',{pageNumber:1});
        },
        /**
         * 初始化时间控件
         * */
        initDate:function () {
            //日期时间范围
            layui.laydate.render({
                elem: '#rangeTime'
                ,range: '~'
                ,format:'yyyy-MM-dd'
                ,theme: '#393D49'
            });
        }

    },
    mounted:function () {
        this.initTable();
        this.initDate();
    }
});